<!--
  author: tangcheng_cd
  create by: 2018/6/8
  descr: 新增修改面板
-->
<template>
  <el-dialog
    :title="dialogMode === 'ADD' ? '新增' : '编辑'"
    :visible.sync="dialogVisiable"
    v-model="dialogMode"
    @close="ardCancelBtnClick"
    class="meta-table-modify-dialog"
    width="800px">
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      :label-position="'right'">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="元数据代码" prop="meta_id">
            <el-input v-model="formData.meta_id" :disabled="true" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属系统" prop="sys_id">
            <el-input v-model="formData.sys_id" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="英文表名" prop="table_name">
            <el-input v-model="formData.table_name" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中文表名" prop="table_name_cns">
            <el-input v-model="formData.table_name_cns" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="业务描述" prop="busi_desc">
            <el-input v-model="formData.busi_desc" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="技术描述" prop="tech_desc">
            <el-input v-model="formData.tech_desc" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="所属主题" prop="theme_id">
            <el-input v-model="formData.theme_id" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属层级" prop="level_id">
            <el-input v-model="formData.level_id" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <!-- 提交的时候拆出开始时间beginDt和结束时间endDt -->
          <!--<el-form-item label="有效日期" prop="availDate">-->
            <!--<el-date-picker v-model="formData.availDate"-->
                            <!--type="daterange"-->
                            <!--align="right"-->
                            <!--unlink-panels-->
                            <!--format="yyyy-MM-dd"-->
                            <!--value-format="yyyyMMdd"-->
                            <!--range-separator="至"-->
                            <!--start-placeholder="开始日期"-->
                            <!--end-placeholder="结束日期">-->
            <!--</el-date-picker>-->
          <!--</el-form-item>-->
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')" class="dialog-btn">重置</el-button>
      <el-button @click="ardCancelBtnClick" class="dialog-btn">关闭</el-button>
      <el-button @click="submitFormData" type="primary" class="dialog-btn">确定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../../../api/ajax/ajax'
  import {letterUnderLineValidators, numLetteValidator} from '../../../../assets/js/rules'
  import api from '../../../../api/url'
  export default {
    name: 'meta-table-add-modify-panel',
    data () {
      return {
        dialogVisiable: false, // 新增对话框显示控制
        dialogMode: { // 对话框色对话框模式  ADD新增 MODIFY 修改
          type: String,
          default: 'ADD'
        }, // 对话框模式
        currentItem: {
        }, // 表单初始化数据
        formData: {}, // 新增对话框表单数据
        formRules: {
          meta_id: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          sys_id: [
            { required: true, message: '请在此输入', trigger: 'blur' }
          ],
          table_name: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' },
            { validator: letterUnderLineValidators, trigger: 'blur' }
          ],
          table_name_cns: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          theme_id: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          busi_desc: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          tech_desc: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          level_id: [
            { required: true, message: '请在此输入', trigger: 'blur' },
            { max: 6, message: '最多输入6个字符', trigger: 'blur' },
            { validator: numLetteValidator, trigger: 'blur' }
          ],
          date: [
            { required: true, message: '请选择日期', trigger: 'blur' }
          ]
          // ,availDate: [
          //   { required: true, message: '此项为必输项', trigger: 'blur' }
          // ]
        } // 新增对话框表单项规则
      }
    },
    methods: {
      // 新增显示对话框
      addShow () {
        // 显示新增对话框
        this.dialogVisiable = true
        // 新增对话框模式
        this.dialogMode = 'ADD'
        // 表单数据初始化
        this.currentItem = {}
        this.formData = {...this.currentItem}
        ajax.post(api.METAIDBUILDER, {meta_table_name: 'meta_table'}).then((res) => {
          this.$set(this.formData, 'meta_id', res.data)
        })
      },
      // 编辑显示对话框
      editShow (selNode) {
        // 显示编辑对话框
        this.dialogVisiable = true
        // 新增对话框模式
        this.dialogMode = 'MODIFY'

        // 表单数据初始化
        this.currentItem = selNode
        this.formData = {...this.currentItem}
      },
      // 取消操作
      ardCancelBtnClick () {
        this.dialogVisiable = false
        // 清空数据
        this.formData = {}
        // 清除验证
        this.$refs.form.clearValidate()
      },
      // 重置表单
      resetForm (formName) {
        this.formData = {...this.currentItem}
        // 清除验证
        this.$refs.form.clearValidate()
      },
      // 预处理表单数据
      preHandFormData (formData) {
        // let availDate = formData['availDate']

        return {
          // te_date: availDate[0],
          // le_date: availDate[1],
          ...formData
        }
      },
      // 提交新增数据
      submitFormData () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let postData = this.preHandFormData(this.formData)
            let callback = () => {
              // 隐藏新增对话框
              this.dialogVisiable = false
              // 数据清空
              setTimeout(() => {
                this.resetForm('form')
              }, 200)
              this.$emit('submitAfter', this)
            }
            if (this.dialogMode === 'ADD') {
              // 新增
              ajax.post(api.INSERT_METATABLE, postData).then(res => {
                callback && callback()
              })
            } else {
              // 修改
              ajax.post(api.UPDATE_METATABLE, postData).then(res => {
                callback && callback()
              })
            }
          } else {
            return false
          }
        })
      }
    },
    created () {
      // 默认表单数据初始化
      this.formData = JSON.parse(JSON.stringify(this.currentItem))
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .meta-table-modify-dialog
    .el-dialog
      width 900px
      overflow auto
      .el-dialog__body
        padding 20px 0px 0px 20px
        margin 0 auto
        margin-right 20px
        .el-date-editor
          width 260px !important
        .el-input
          width 100%
          .el-input__inner
            height 40px
        .el-button--primary
          float right
          margin-left 10px
        .el-button
          float right
        .el-date-editor
          height 40px
          width 100% !important
          .el-range-separator
            height 25px
</style>
